<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!--传参：父传子，写法：:形参="实参" -->
    <cpn :cmovie="movie" :message="message"></cpn>
  </div>

      <template id="cpn">
        <div>
          <p>{{cmovie}}</p>
          <h2>{{message}}</h2>
        </div>
      </template>
      
      <script src="vue.js"></script>
      <script>
        Vue.component("cpn", {
          template: "#cpn",

          //传参：父传子，写法：["形参1"[,"形参2"]]
          props: ["cmovie", "message"],
          //限制数据类型（支持验证以下类型）
          //String
          //Number
          //Boolean
          //lArray
          //Object
          //Date
          //Function
          //Symbol
          props: {
            cmovie: Array,
            message: String,
          },
          //设置默认值
          props: {
            cmovie: {
              type: Array,
              default: "默认值",
              //required为必须传的参数
              required:true,
            },
            message: {
              type: String,
              default: "默认值"
            },
          },

          //数据对象
          data() {
            return {
            }
          },
          //methods用于定义方法
          methods: {
          },
        })
        app = new Vue({
          //声明要绑定的id
          el: '#app',
          //数据对象 
          data: {
            message: "测试文本",
            movie: ["测试数据1", "测试数据2", "测试数据3", "测试数据4",]
          },
          //methods用于定义方法
          methods: {
            
          }
        })
      </script>
</body>
</html>